<template>
	<view class="content">
		<view class="top">
			<view class="top-for" v-for="(item, index) in ['综合', '价格', '上新', '销量']">
				<text>{{ item }}</text>
				<view>
					<u-icon name="arrow-up-fill" size="7"></u-icon>
					<u-icon name="arrow-down-fill" size="7"></u-icon>
				</view>
			</view>
		</view>

		<view class="bootom" v-if="imgList.length">
			<view class="hot-imgs" v-for="(item, index) in imgList" @tap="imgUrl(item.id)">
				<image :src="url+item.mainImage" mode="aspectFill"></image>
				<view class="img-text">
					<text class="hot-text-name">
						<text class="tag" style="margin-right: 10rpx">全新</text>
						{{ item.productName }}
					</text>

					<view class="numberDate">
						<text style="font-weight: bold; font-size: 35rpx">￥{{ cut(item, true) }}</text>
						<text>{{ cut(item, false) ? ('.' + cut(item, false)) : '' }}/天</text>
						<text style="margin-left: 10rpx; color: #000">{{ item.minTenancy || 365 }}天起租</text>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="emp">
			<u-empty mode="data" icon="/static/main/image2x.png"></u-empty>
		</view>
	</view>
</template>

<script>
import api from '@/api/index.js';
import main from '@/api/main.js';
import { numberCut } from '@/utils/index.js';
import {baseUrl} from "../../config.js"
export default {
	data() {
		return {
			imgList: [],
			url:""
		};
	},
	onLoad(e) {
		if (e.id) {
			this.getClassifyIdList(e.id);
		}
	},
	methods: {
		imgUrl(id) {
			uni.navigateTo({
				url: '/subPages/main/commodity?id=' + id
			});
		},
		getClassifyIdList(id) {
			main.getList({
				classifyId: id
			})
				.then((data) => {
					this.imgList = data.rows;
				})
				.catch((erro) => {
					console.log(erro);
				});
		},
		cut(row, bool) {
			let number;
			if (!row.leaseGoodSkus) {
				number = 0;
			} else if (!row.leaseGoodSkus[0].leaseRentalRules) {
				number = 0;
			} else {
				number = row.leaseGoodSkus[0].leaseRentalRules[0].everydayPrice;
			}

			return numberCut(number || 12.23, bool);
		}
	},
	mounted(){
		 this.url = baseUrl
	}
};
</script>

<style lang="scss" scoped>
.top {
	height: 40rpx;
	width: 100%;
	padding-top: 50rpx;
	display: flex;
	justify-content: space-between;

	.top-for {
		margin: 0 25rpx;
		display: flex;
		align-items: center;
		text {
			margin-right: 5rpx;
		}
	}
}

.bootom {
	margin: 30rpx 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	.hot-imgs {
		margin: 20rpx 0;
		border-radius: 20rpx;
		width: 330rpx;
		height: 400rpx;
		background-color: #fff;

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		image {
			margin: 30rpx;
			width: 250rpx;
			height: 250rpx;
		}
		.img-text {
			margin: 0 20rpx;
			.hot-text-name {
				display: -webkit-box;
				-webkit-line-clamp: 1; /* 限制为两行 */
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: normal; /* 允许文本换行 */
			}

			.numberDate {
				color: red;
				font-size: 25rpx;
			}
		}
	}
}
</style>
